<template>
  <view class="content">
    <view class="search-box">
      <u-icon class="sr-icon" name="search" color="#999999"></u-icon>
      <input class="serch-inp" type="text" :value="searchVal" placeholder="搜索"
             @input="searchFn" />
    </view>

    <view class="page">
      <mescroll-body
          class="water_scroll"
          ref="mescrollRef"
          top="120rpx"
          @init="mescrollInit"
          :down="downOption"
          @down="downCallback"
          @up="upCallback"
      >
        <list-col v-for="(item, index) in dataList">
          <view
              class="list-col"
              :key="index"
              @click="goDuildInfo(item)"
          >
            <view class="list-col-t">
              <view class="intro">
                <text>{{ item.enterpriseName }}</text>
                <text></text>
              </view>
            </view>
            <view class="list-col-b">
              <view>
                <text>类别：{{ item.productionType }}</text>
              </view>
              <view>
                <text>联系人：{{ item.enterpriseContact }}</text>
              </view>
            </view>
          </view>
        </list-col>

      </mescroll-body>
    </view>

  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import ListCol from "../../components/ListCol/ListCol";
export default {
  components: {ListCol},
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      dataList: [],
      searchVal:'',
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
      dictList: [],
    };
  },
  onLoad(option) {
    this.getDict();
  },
  methods: {
    getDict() {
      //联网加载数据
      this.apis.commonApi
        .getDict("enterprise_type")
        .then((res) => {
          this.dictList = res.data;
        })
        .catch(() => {
          //联网失败的回调,隐藏下拉刷新的状态
        });
    },
    goDuildInfo(row) {
      uni.setStorageSync('enterprise',row)
      uni.navigateTo({
        url: "./qyFns?name=" + row.enterpriseName + "&id=" + row.id,
      });
    },
    /*下拉刷新的回调 */
    downCallback(page) {
      let that = this;
      //联网加载数据
      this.apis.businessApi
        .qyEnterpriseList({
          pageNum: page.num,
          pageSize: page.size,
        })
        .then((res) => {
          const rows = res.rows;
          for (let i = 0; i < rows.length; i++) {
            let enterpriseType = rows[i].enterpriseType;
            for (let j = 0; j < this.dictList.length; j++) {
              let dictValue = this.dictList[j].dictValue;
              if (enterpriseType == dictValue) {
                rows[i].enterpriseType = this.dictList[j].dictLabel;
              } else {
                rows[i].enterpriseType = "未知";
              }
            }
          }
          this.dataList = rows;
          this.mescroll.endBySize(res.rows.length, res.total);
        })
        .catch(() => {
          this.mescroll.endErr();
        });
    },
    upCallback(page) {
      //联网加载数据
      this.apis.businessApi
        .qyEnterpriseList({
          pageNum: page.num,
          pageSize: page.size,
          enterpriseName:this.searchVal
        })
        .then((res) => {
          this.dataList = this.dataList.concat(res.rows);
          this.mescroll.endBySize(res.rows.length, res.total);
        })
        .catch(() => {
          //联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        });
    },
    searchFn(e) {
      this.dataList = [];
      this.searchVal = e.detail.value;
      clearTimeout(this.searchTimout);
      this.searchTimout = setTimeout(() => {
        this.mescroll.resetUpScroll();
      }, 1000);
    }
  },
};
</script>

<style lang="scss" scoped>
page {
  padding: 0;
}

.content {
  .mater_con {
    overflow-y: auto;
    // height: 1160rpx;
    margin: 20rpx 20rpx 0 20rpx;
  }

  .mater_list {
    padding: 24rpx 30rpx;
    box-sizing: border-box;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    .mater_intro,
    .mater_title {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #666666;
      .intro {
        display: flex;
        font-size: 28rpx;
        justify-content: space-between;
        text:nth-child(2) {
          font-size: 26rpx;
        }
      }
    }
    .mater_intro {
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #eeeeee;
    }
    .mater_title {
      padding-top: 20rpx;
      .intro {
        font-size: 26rpx;
        color: #999999;
      }
    }
  }
}

.search-box{
  box-sizing: border-box;
  padding: 20rpx;
	top: 0;
	/* #ifdef H5 */
	top: 88rpx;
	/* #endif */
  left: 0;
  width: 100vw;
  background-color: #fff;
  display: flex;
  align-items: center;
  position: fixed;
  z-index:1000;

  /deep/ input {
    border-radius: 12rpx;
    flex-grow: 1;
    height: 70rpx;
    display: flex;
    align-items: center;
    padding-left: 60rpx;
    background: #f5f5f5;
  }

  /deep/ .uni-input-placeholder{
    left: 50rpx;
  }

  /deep/ .uni-input-input{
    padding-left: 50rpx;
  }

  .sr-icon {
    position: absolute;
    left: 20rpx;
    font-size: 36rpx;
    margin-left: 16rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
}
</style>
